<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>模拟下载列表框-前端设计</title>
<style type="text/css">
*{margin: 0;padding: 0;font-size: 12px;}
.clearfix:after {content:"\20";display:block;height:0;clear:both;}
.clearfix {zoom:1} 
ul,li{list-style: none;}
.box{width: 500px;margin: 10px auto;}
.select{border: 3px solid #EEE;float: left;margin-right: 5px;position: relative;}
    .select .txt1{height: 25px;border: 1px solid #ddd;padding:0 5px;overflow: hidden;line-height: 25px;width: 68px;cursor: default;float: left;}
    .select .droplist{position: absolute;width: 78px;border: 1px solid #ddd;background: #fff;left: 0;top: 25px;display: none;box-shadow:2px 2px 2px #ddd}
    .select .droplist a{display: block;text-decoration: none;height: 20px;line-height: 20px;padding-left: 5px;color: #444;}
    .select .droplist a:hover{background: #ddd;text-decoration: none;}
    .selected .droplist{display: block;}
    .select b{position:absolute;right:10px;top:12px;width:0;height:0;border-width:4px 4px;border-style:solid;border-color:#666 #fff #fff;font-size:0;line-height:0;}
.keybtn{border: 3px solid #EEE;overflow: hidden;padding: 0;width: 334px;float: left;vertical-align: top;}
    .keybtn .txt2{width:272px;height: 25px;border: 1px solid #ddd;line-height: 25px;text-indent: 5px;overflow: hidden;float: left;color: #ccc;}
    .keybtn .btn{width: 60px;height: 27px;background: #1CA9D7;border: 1px solid #1898DE;text-align: center;color: #fff;font-weight: bold;font-size: 14px;float: left;cursor: pointer;padding-top: 3px;}
</style>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
	   $('.droplist a').click(function(){
	       oval=$(this).html();
	       $('.txt1').val(oval).parent().removeClass('selected');
	   })
	})
</script>
</head>
<div class="box clearfix">
    <form action="http://www.ahuing.com">
        <span class="select" onmouseover="this.className='select selected'" onmouseout="this.className='select'">
            <input type="text" class="txt1" value="栏目1"/>
            <span class="droplist">
                <a href="###">栏目1</a>
                <a href="###">栏目2</a>
                <a href="###">栏目3</a>
                <a href="###">栏目4</a>
                <a href="###">栏目5</a>
                <a href="###">栏目6</a>
            </span>
            <b></b>
        </span>
        <span class="keybtn">
        	<input type="text" class="txt2"  onfocus="if(this.value == '请输入查询的关键字'){this.value = ''};this.style.color='#444'" onblur="if(this.value.match(/^\s*$/)){this.value = '请输入查询的关键字'};this.style.color='#ccc'" value="请输入查询的关键字"/>
        	<input type="submit" class="btn" value="搜索"/>
        </span>
    </form>
</div>
</html>
